<template>
  <div class="bottom">
    <div class="bottomTitle">
      <span>{{ lang.bottom_full_stats }}</span>
      <div class="jump" v-click-move @click="handleDeposit">
        {{ lang.deposit }}
        <NuxtImg :src="assets.arrowRight" alt=">" />
      </div>
    </div>
    <div class="bottomItem">
      <div v-for="item in summaryStats" :key="item.id">
        <div class="fontBox">
          <p>{{ item.label }}</p>
          <span>{{ userStore.moneyUnit }} {{ item.value }}</span>
        </div>
      </div>
    </div>
    <p class="titleb">{{ lang.bottom_quick_share }}</p>
    <div class="bottomItem2">
      <div class="bottomItem2-item" v-for="level in levels" :key="level.id">
        <span class="title">{{ level.title }}</span>
        <div class="box">
          <div v-for="m in level.metrics" :key="m.id">
            <p>{{ userStore.moneyUnit }} {{ m.value }}</p>
            <span>{{ m.label }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/agente");
const userStore = useUserStore();

interface SummaryItem {
  id: number;
  label: string;
  value: string;
}

interface MetricItem {
  id: number;
  label: string;
  value: string;
}

interface LevelItem {
  id: number;
  title: string;
  metrics: MetricItem[];
}

const assets = {
  arrowRight: "/images/layout/icon-jtRight.png",
};

const summaryStats: SummaryItem[] = [
  { id: 1, label: lang.bottom_total_teams, value: "0" },
  {
    id: 2,
    label: lang.bottom_team_play,
    value: `0,00`,
  },
  {
    id: 3,
    label: lang.bottom_my_commission,
    value: `0,00`,
  },
];

const levels: LevelItem[] = [
  {
    id: 1,
    title: lang.level_1,
    metrics: [
      { id: 1, label: lang.bottom_total_teams, value: "0" },
      {
        id: 2,
        label: lang.bottom_team_play,
        value: `0,00`,
      },
      {
        id: 3,
        label: lang.bottom_my_commission,
        value: `0,00`,
      },
    ],
  },
  {
    id: 2,
    title: lang.level_2,
    metrics: [
      { id: 1, label: lang.bottom_total_teams, value: "0" },
      {
        id: 2,
        label: lang.bottom_team_play,
        value: `0,00`,
      },
      {
        id: 3,
        label: lang.bottom_my_commission,
        value: `0,00`,
      },
    ],
  },
  {
    id: 3,
    title: lang.level_3,
    metrics: [
      { id: 1, label: lang.bottom_total_teams, value: "0" },
      {
        id: 2,
        label: lang.bottom_team_play,
        value: `0,00`,
      },
      {
        id: 3,
        label: lang.bottom_my_commission,
        value: `0,00`,
      },
    ],
  },
];

const handleDeposit = () => {
  userStore.changeShowCarteira(true, 2, 2);
};
</script>

<style scoped lang="scss">
.bottom {
  margin-top: 0.5rem;
  border-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  color: var(--theme-neutral1);
  padding-bottom: 1rem;

  .bottomTitle,
  .titleb {
    font-size: 0.37rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
  }

  .titleb {
    margin-top: 0.5rem;
  }

  .jump {
    display: flex;
    align-items: center;
    font-size: 0.28rem;
    cursor: pointer;

    img {
      margin-left: 0.1rem;
      width: 0.3rem;
    }
  }

  .bottomItem {
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    div {
      display: flex;
      flex-direction: row;
      align-items: center;

      .fontBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        p {
          color: var(--theme-neutral2);
          font-size: 0.32rem;
          font-weight: 700;
          margin-bottom: 0.2rem;
        }

        span {
          font-size: 0.45rem;
          color: var(--theme-dec4);
        }
      }
    }
  }

  .bottomItem2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.37rem;
    box-sizing: border-box;

    .bottomItem2-item {
      display: flex;
      flex-direction: column;
      border-radius: 0.3rem;
      background: var(--theme-color4);

      .title {
        font-size: 0.38rem;
        font-weight: 700;
        display: inline-block;
        background: var(--theme-color1);
        line-height: 0.6rem;
        box-sizing: border-box;
        border-radius: 0.3rem 0rem;
        width: 1.8rem;
        height: 0.6rem;
        text-align: center;
      }

      .box {
        width: 100%;
        padding: 0.2rem 0.36rem 0.5rem;
        box-sizing: border-box;
        display: flex;

        div {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          position: relative;

          p {
            color: var(--theme-dec4);
            font-size: 0.45rem;
          }

          span {
            color: var(--theme-neutral2);
            font-size: 0.28rem;
            margin-top: 0.2rem;
          }

          &:after {
            content: "";
            display: block;
            width: 70%;
            height: 0.03rem;
            background: linear-gradient(
              to right,
              transparent 0%,
              transparent 10%,
              var(--theme-neutral2) 50%,
              transparent 90%,
              transparent 100%
            );
            position: absolute;
            right: -0.5rem;
            bottom: 50%;
            transform: rotate(90deg);
          }

          &:last-child:after {
            display: none;
          }
        }
      }
    }
  }
}
</style>
